<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <title>登录番信</title>
    <link th:href="@{libs/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{libs/plugins/layui-v2.4.5/layui/css/layui.css}" rel="stylesheet">
    <script th:src="@{libs/js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{libs/plugins/layui-v2.4.5/layui/layui.js}"></script>
    <script th:src="@{libs/js/bootstrap.js}"></script>
    <script th:src="@{libs/js/vue.js}"></script>
</head>
<body>
<div id="app">
    <div class="tomato_IM">
        <div class="tomato_info">
            <p>西红柿1</p>
        </div>
        <div class="tomato_tab">
            <ul class="tomato_tablist">
                <li>
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                </li>
            </ul>
        </div>
        <div class="tomato_content">
            <ul class="tomato_friendlist">
                <li>好友一</li>
                <li>好友二</li>
                <li>好友三</li>
                <li>好友一</li>
                <li>好友二</li>
                <li>好友三</li>
                <li>好友一</li>
                <li>好友二</li>
                <li>好友三</li>
                <li>好友一</li>
                <li>好友二</li>
                <li>好友三</li>
                <li>好友一</li>
                <li>好友二</li>
                <li>好友三</li>
                <li>好友一</li>
                <li>好友二</li>
                <li>好友三</li>
            </ul>
        </div>
        <div class="tomato_tools">
            <ul>
                <li><span class="glyphicon glyphicon-search" aria-hidden="true"></span></li>
                <li><span class="glyphicon glyphicon-send" aria-hidden="true"></span></li>
            </ul>
        </div>
    </div>
    <div class="chat_page">
        <div class="chat_list">
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
            <div>
                <span>好友一</span>
                <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span>
            </div>
        </div>
        <div class="tomato_chat">
            <div class="tomato_chat_title" >
                <div><p>好友名</p></div>
                <div>
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                </div>
            </div>
            <div class="tomato_chat_panel">
                <div class="chat_panel_left">
                    <span>西红柿1:</span>
                    <span>你好</span>
                    <div></div>
                </div>
                <div class="chat_panel_right">
                    <span>:西红柿2</span>
                    <span>你也好</span>
                    <div></div>
                </div>
                <div class="chat_panel_left">
                    <span>西红柿1:</span>
                    <span>你好</span>
                    <div></div>
                </div>
                <div class="chat_panel_left">
                    <span>西红柿1:</span>
                    <span>你好</span>
                    <div></div>
                </div>
                <div class="chat_panel_left">
                    <span>西红柿1:</span>
                    <span>你好</span>
                    <div></div>
                </div>
                <div class="chat_panel_left">
                    <span>西红柿1:</span>
                    <span>你好</span>
                    <div></div>
                </div>
                <div class="chat_panel_left">
                    <span>西红柿1:</span>
                    <span>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
                    <div></div>
                </div>
                <div class="chat_panel_right">
                    <span>西红柿1:</span>
                    <span>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
                    <div></div>
                </div>
                <div class="chat_panel_left">
                    <span>西红柿2:</span>
                    <span>23423424323423sdfsfdsf23423424323423sdfsfdsf23423424323423sdfsfdsf23423424323423sdfsfdsf23423424323423sdfsfdsf23423424323423sdfsfdsf</span>
                    <div></div>
                </div>
            </div>
            <div class="tomato_chat_tool">
                <i class="layui-icon layui-icon-face-smile-b"></i>
                <i class="layui-icon layui-icon-picture"></i>
                <i class="layui-icon layui-icon-file"></i>
                <i class="layui-icon layui-icon-headset"></i>
                <i class="layui-icon layui-icon-video"></i>
            </div>
            <div class="tomato_textarea">
                <textarea cols="66" rows="4"></textarea>
            </div>
            <div class="tomato_footer">
                <button>发送</button>
            </div>
        </div>
    </div>
</div>
</body>
<script th:src="@{libs/js/spider.js}"type="text/javascript"></script>
<link th:href="@{/test/tomatoIM.css}" rel="stylesheet">
</html>
